<template>
  <div class="form-card-index-title">
    <div class="triangle-badge" :style="{ borderColor: badgeColor }"></div>
    <span class="index-text" :style="{color: badgeColor}">{{ index + 1 }}</span>
  </div>
</template>

<script setup>
import {computed} from 'vue';
import {createProps} from '@/utils';

defineOptions({name: 'FormCardIndexTitle'});
const props = defineProps({
  // 角标索引值
  index: createProps(Number)
});

// 根据index计算角标颜色
const badgeColor = computed(() => {
  // 常用的角标颜色列表
  const colors = [
    '#e8a53d', // 红色
    '#6ea636', // 青色
    '#5790ca', // 蓝色
    '#a155b2', // 浅绿色
    '#cdca18', // 黄色
    '#dca946', // 橙色
    '#68b122', // 粉色
    '#5d8bc7'  // 紫色
  ];

  // 对index取模，确保颜色循环使用
  const colorIndex = (props.index) % colors.length;
  return colors[colorIndex < 0 ? 0 : colorIndex];
});
</script>

<style scoped lang="less">
.form-card-index-title {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  overflow: visible;
  pointer-events: none;
}

.triangle-badge {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  border-top: 0.30rem solid #3498db;
  border-right: 0.30rem solid transparent !important;
  animation: fadeIn 0.3s ease-in-out;
  opacity: 0.2;
}

.index-text {
  position: absolute;
  top: 0.03rem;
  left: 0.02rem;
  font-size: 0.11rem;
  font-weight: bold;
  text-align: center;
  width: 16px;
  line-height: 1.2;
}

</style>